// stores/themeStore.ts
// import { useEffect } from "react";
import { create } from "zustand";
import { persist, PersistStorage } from "zustand/middleware";

interface ThemeState {
  theme: "light" | "dark" | "blue" | "yellow";
  toggleTheme: () => void;
}

// 自定义存储类型（TypeScript 需要）
const storage: PersistStorage<ThemeState> = {
  //@ts-ignore
  getItem: (name) => localStorage.getItem(name),
  //@ts-ignore
  setItem: (name, value) => localStorage.setItem(name, value),
  removeItem: (name) => localStorage.removeItem(name),
};

const useThemeStore = create<ThemeState>()(
  persist(
    (set) => ({
      theme: "light",
      toggleTheme: () =>
        set((state) => ({
          theme: (state.theme = "dark"),
        })),
      blueTheme: () => set((state) => ({ theme: (state.theme = "yellow") })),
    }),
    {
      name: "theme-storage", // 本地存储的 key
      storage, // 指定存储引擎
    }
  )
);

export default useThemeStore;
